const path = require("path")
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require('terser-webpack-plugin');
const {VueLoaderPlugin} = require("vue-loader")
module.exports = {
    // 多入口多出口 要将入口写对象
    entry: { index:path.join(__dirname,"src","index.js"),index1:"./src/index1.js"},// 入口文件可以使用相对路径
    mode:"development",// mode 是模式.development 是开发环境
    output:{
        path:path.join(__dirname,"dist"),
        filename:"[name].js", // ["name"].js
    },
    module: {
        rules: [
          {
            test: /\.css$/i,
            use: [MiniCssExtractPlugin.loader, "css-loader"],
          },
          {
            test: /\.(png|jpg|gif)$/i,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192,
                   name:"img/[name].[ext]"
                }
              },
            ],
           type: 'javascript/auto'
          },
          // {
          //   test: /\.(png|svg|jpg|jpeg|gif)$/i,
          //   type: 'asset/resource',
          // },
          {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          },
          {
            test:/\.vue$/,
            use:"vue-loader"
          },
          {
            test: /\.s[ac]ss$/i,
            use: [
              // 将 JS 字符串生成为 style 节点
              'style-loader',
              // 将 CSS 转化成 CommonJS 模块
              'css-loader',
              // 将 Sass 编译成 CSS
              'sass-loader',
            ],
          },
        ],
     },
     optimization:{ // 优化
       minimize : true ,// 在开发环境下减少代码体积
       minimizer:[
        new TerserPlugin({
        }),
        new CssMinimizerPlugin(), // 减少css代码的ti'jiao

       ]
     },
     plugins: [
      new VueLoaderPlugin(),
      new HtmlWebpackPlugin(
        {
          template:"./src/index.html"
        }
      ),
      new MiniCssExtractPlugin()
     ],
     devServer:{
       port:9001, // 端口号
       compress: true, // 编译进度
       hot:true, // 代码一保存，浏览器自动刷新
       open:true // 自动打开浏览器
     }
};